import React, { useEffect, useState } from 'react';
import service from '../../../api'
import { useNavigate } from 'react-router-dom'
import * as echarts from 'echarts';
import "./Xuexi.scss"
import { Space, Table, Tag, Tabs, Segmented, DatePicker } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { TabsProps } from 'antd';

interface Props {

}
interface DataType {
    img: string;
}

function Xuexi(props: Props) {
    var myChart: any = null;
    var myShu: any = null;
    var myFufei: any = null;
    let [xiao, setxiao] = useState([]);//访问用户量


    const { RangePicker } = DatePicker;//日期
    let [list, setlist] = useState([]);//双线echarts。
    let [renshulist, setrenshulist] = useState([]);//双线echarts。
    let [yonghu, setyonghu] = useState([]);//访问用户量echarts。

    const paylist = async () => {
        const res = await service.shuju.shuju_xuexi_qushi();
        // console.log(res)
        res.data?.map((item: any) => {
            item.key = item.id
        })

        let blue = res.data.map((item: any) => {
            return item.blue
        })
        let orange = res.data.map((item: any) => {
            return item.orange
        })
        let green = res.data.map((item: any) => {
            return item.green
        })
        let kedu = res.data.map((item: any) => {
            return item.kedu
        })

        draw(blue, orange, green, kedu);
        //实例化echarts
        setlist(res.data)
    }
    const renshu_list = async () => {
        const res = await service.shuju.shuju_xuexi_tongji();
        console.log(res)
        res.data?.map((item: any) => {
            item.key = item.id
        })
        let orange = res.data.map((item: any) => {
            return item.orange
        })

        let kedu = res.data.map((item: any) => {
            return item.kedu
        })
        myrenshu(orange, kedu);
        //实例化echarts
        setrenshulist(res.data)
    }

    //销售量TOP5课程
    const xiaoliang = async () => {
        const res = await service.home.index_xiaoliang();
        console.log(res.data)
        res.data?.map((item: any) => {
            item.key = item.id
        })

        setxiao(res.data)
    }

    //今日用户访问echarts
    const yonghufang = async () => {
        const res = await service.home.index_yonghu();
        console.log(res.data)
        res.data.map((item: any) => {
            item.key = item.id
        })

        let haha = res.data.map((item: any) => {
            return {
                name: item.zhanbi,
                value: item.shuliang,
            }
        })
        yong(haha);
        setyonghu(res.data)
    }

    useEffect(() => {
        myChart = echarts.init(document.getElementById('charts') || document.body);
        myShu = echarts.init(document.getElementById('renshu') || document.body);
        myFufei = echarts.init(document.getElementById('fangwen') || document.body);

        paylist();
        renshu_list()
        xiaoliang()
        yonghufang()

    }, []);


    // 各类型课程学习时长趋势
    var draw = (blue: any, orange: any, green: any, kedu: any) => {
        // 绘制图表
        myChart.setOption({
            backgroundColor: "#fff",
            title: { //图表的标题
                text: '各类型课程学习时长趋势（h）',
                top: 20,
                left: '30',
                textStyle: {
                    color: 'black',
                    fontSize: 20, // 务必记住设置文字大小只能是数字
                    lineHeight: 30,
                    fontWeight: 'lighter'
                }, // 主标题样式
            },
            grid: {//图标标题之间的距离
                left: '3%',
                right: '5%',
                bottom: '15%',
                top: '20%',
                containLabel: true,
            },

            xAxis: { //x轴设置
                data: kedu

            },
            yAxis: [{ // 纵轴标尺固定
                type: 'value',
                scale: true,
                max: 1200,
                min: 0,
                splitNumber: 6,
                // data: yAxis,
                boundaryGap: [0.2, 0.2],
                splitLine: {//虚线
                    show: true,
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            }],

            legend: { //图例
                top: 30,
                left: 1000,
                // data: ['饼图', '销量', '价格']
            },
            calculable: true,
            series: [ //数据系列
                {
                    name: '视频课程',
                    type: 'line',//'line' , 'bar' , 'pie'
                    data: orange,
                    symbolSize: 0, //圆点大小

                    smooth: true, //是否平滑曲线显示
                    itemStyle: {
                        normal: {
                            color: 'orange', //折线颜色
                        }
                    }

                },
                {
                    name: '图文课程',
                    type: 'line',//'line' , 'bar' , 'pie'
                    data: blue,
                    symbolSize: 0, //圆点大小

                    smooth: true, //是否平滑曲线显示
                    itemStyle: {
                        normal: {
                            color: 'blue', //折线颜色
                        }
                    }

                },
                {
                    name: '音频课程',
                    type: 'line',//'line' , 'bar' , 'pie'
                    data: green,
                    symbolSize: 0, //圆点大小

                    smooth: true, //是否平滑曲线显示
                    itemStyle: {
                        normal: {
                            color: 'lime', //折线颜色
                        }
                    }

                }

            ]
        });
    }
    var myrenshu = (orange: any, kedu: any) => {
        // 绘制图表
        myShu.setOption({
            backgroundColor: "#fff",

            title: { //图表的标题
                text: '实时学习人数统计',
                top: 20,
                left: '30',
                textStyle: {
                    color: 'black',
                    fontSize: 20, // 务必记住设置文字大小只能是数字
                    lineHeight: 30,
                    fontWeight: 'lighter'
                }, // 主标题样式
            },
            grid: {//图标标题之间的距离
                left: '3%',
                right: '5%',
                bottom: '15%',
                top: '20%',
                containLabel: true,
            },

            xAxis: { //x轴设置
                data: kedu

            },
            yAxis: [{ // 纵轴标尺固定
                type: 'value',
                scale: true,
                max: 1200,
                min: 0,
                splitNumber: 6,
                boundaryGap: [0.2, 0.2],
                splitLine: {//虚线
                    show: true,
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                stack: 'Total',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(230,104,78, 0.9)'
                        },
                        {
                            offset: 0.9,
                            color: 'rgba(230,104,78, 0)'
                        }
                        ], false),
                    }
                }
            }],

            legend: { //图例
                top: 30,
                left: 1000,
                // data: ['饼图', '销量', '价格']
            },
            calculable: true,
            series: [ //数据系列
                {
                    // name: '视频课程',
                    type: 'bar',//'line' , 'bar' , 'pie'
                    data: orange,
                    symbolSize: 0, //圆点大小

                    smooth: true, //是否平滑曲线显示
                    itemStyle: {
                        normal: {
                            // color: 'orange', //折线颜色

                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(230,104,78, 0.9)'
                            },
                            {
                                offset: 0.9,
                                color: 'rgba(230,104,78, 0.4)'
                            }
                            ], false),
                        }
                    }

                },
            ]
        });
    }
    //绘图用户访问
    var yong = (haha: any,) => {
        myFufei.setOption({
            title: {
                text: '付费学习人数占比',
                top: 20,
                left: '30',
            },
            graphic: [{ //环形图中间添加文字
                type: 'text', //通过不同top值可以设置上下显示
                left: '42%',
                top: '43%',
                style: {
                    text: '1000\n总人数',
                    textAlign: 'center',
                    fill: '#1E7CE8', //文字的颜色
                    fontSize: 22,
                    lineHeight: 26,
                }
            }],
            legend: { //图例
                bottom: 15,
                // left: 320,
                // top: 10
            },
            series: [
                {
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    labelLine: {
                        normal: {
                            show: true,
                            length: 20,
                            length2: 20,
                            lineStyle: {
                                color: '#333'
                            }
                        }
                    },

                    data: haha
                }
            ]
        });

    }

    const columns: ColumnsType<DataType> = [
        {
            title: '排名',
            dataIndex: 'key',
            key: 'key',
        },
        {
            title: '课程信息',
            dataIndex: 'img',
            key: 'img',
            width: "50px",
            render: (_, record) => <img src={record.img} />,//动态渲染标签/组件
        },
        {
            title: '',
            dataIndex: 'kong',
            key: 'kong',
        },
        {
            title: '访问量',
            key: 'liang',
            dataIndex: 'liang',
        },
        {
            title: '支付量',
            key: 'payliang',
            dataIndex: 'payliang',
        },
        {
            title: '支付转换率',
            key: 'zhuan',
            dataIndex: 'zhuan',
        },

    ];
    const items: TabsProps['items'] = [
        {
            key: '1',
            label: `今日`,

        },
        {
            key: '2',
            label: `昨日`,

        },
        {
            key: '3',
            label: `最近7天`,

        },
        {
            key: '4',
            label: `最近30天`,

        },
    ];
    return (
        <div className='xuexi'>
            <div className="top">
                <h3>各终端访问量趋势</h3>
                <h4>统计日期</h4>
                <Space direction="vertical" size={12}>
                    <RangePicker />
                </Space>
                <Tabs items={items} />
            </div>
            <div id="charts"></div>
            <div id="renshu"></div>
            <div className="box">
                <div className="left">
                    <Table columns={columns} dataSource={xiao}>
                    </Table>
                </div>
                <div className="right">
                    <div id='fangwen'></div>
                </div>
            </div>

        </div>
    );
}

export default Xuexi;